<script setup>
import { usePopup } from '@/hooks/usePopup'
const { removePopup } = usePopup()
const key = 'warning-spjk'

const propertyList = [
  {
    property: '设备名称',
    key: 'name',
    value: '视频监控1',
  },
  {
    property: '设备位置',
    value: '大门东侧',
  },
  {
    property: '报警类型',
    value: '抽烟',
  },
  {
    property: '报警等级',
    key: 'level',
    value: '一级',
  },
  {
    property: '报警时间',
    value: '2024-01-28 16:32:45',
  },
  {
    property: '处理状态',
    key: 'status',
    value: '待处理',
  },
]
</script>

<template>
  <div class="warning-spjk-popup" v-drag="{ target: '.title-area' }">
    <div class="title-area">
      <div class="title"></div>
      <div class="title-right" @click="removePopup(key)"></div>
    </div>
    <div class="content-area">
      <div class="info">
        <div class="left">
          <img src="@/assets/imgs/smoke-warning.png" />
        </div>
        <el-row :gutter="24" class="right">
          <el-col
            :class="item.key"
            :span="24"
            v-for="(item, index) in propertyList"
            :key="index"
            ><span class="property">{{ item.property }}:</span
            ><span class="value">{{ item.value }}</span></el-col
          >
        </el-row>
      </div>

      <div class="detail-button">
        <el-button text> 人员轨迹查看 </el-button>
        <el-button text> 视频回放 </el-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.warning-spjk-popup {
  width: 446px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  background: url('@/assets/imgs/pop-up notification.png') 100% 100% no-repeat;

  .title-area {
    height: 40px;
    display: flex;
    justify-content: space-between;

    .title {
      margin-left: 33px;
      width: 87px;
      height: 31px;
      background: url('@/assets/imgs/bjxx-title.png') 100% 100% no-repeat;
    }

    .title-right {
      width: 16px;
      height: 16px;
      background: url('@/assets/imgs/ic_gb.png') 100% 100% no-repeat;
      margin-top: 24px;
      margin-right: 24px;
      cursor: pointer;
    }
  }

  .content-area {
    padding: 14px 26px;

    .info {
      display: flex;
      width: 100%;

      .left {
        width: 200px;

        img {
          width: 185px;
          height: 185px;
        }
      }

      .right {
        flex: 1;
      }
    }

    :deep(.el-row) {
      .el-col {
        font-size: 14px;
        margin-bottom: 14px;
        color: white;

        &:last-child {
          margin-bottom: 10px;
        }
        .property {
          color: rgba(150, 186, 208, 1);
        }

        .value {
          margin-left: 9px;
        }

        &.name {
          font-size: 16px;
          font-weight: 500;
          color: #25d7f1;
          .property {
            color: #25d7f1;
          }
        }

        &.type {
          .value {
            color: #00ff96;
          }
        }

        &.video {
          .value {
            text-decoration: underline;
            color: #fbaa37;
            cursor: pointer;
          }
        }
      }
    }

    .detail-button {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      .el-button {
        font-weight: 500;
        text-decoration: underline;
        color: #1d8ef5;

        &:hover {
          background: transparent;
        }

        &:focus {
          background: transparent !important;
        }
      }
    }
  }
}
</style>
